<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>

    <title>学生信息显示页面</title>

    <div th:replace="common/common.html :: common_resource"></div>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>学生信息表格</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="student_list.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                        </div>
                    </div>
                    <!-- 3D立体按钮在button的class中加入 dim -->
                    <div class="ibox-content" style="margin-bottom:50px">
                        <div class="row">
                            <div class="col-sm-2 m-b-xs">
                                <a data-toggle="modal" href="student_list.html#modal-form" onclick="addForm()">
                                    <button style="width:130px" class="btn btn-outline btn-primary" type="button">
                                        <i class="fa fa-plus"></i> 新增学生
                                    </button>
                                </a>
                            </div>
                            <div class="col-sm-3">
                                <div class="input-group">
                                    <input style="height:35px;" type="text" placeholder="请输入关键词" id="keywords"
                                           class="input-sm form-control">
                                    <span class="input-group-btn">
                                        <button style="height:35px;width:80px;" type="button" class="btn btn-sm btn-primary"
                                                href="javascript:;" onclick="query()"> 搜索</button>
                                    </span>
                                </div>
                            </div>
                            <script type="text/javascript">
                                // 模糊查询
                                function query() {
                                    window.location.href = "/zjh/student/findStudentById?stuId=" + $("#keywords").val() + "";
                                }
                            </script>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover" >
                                <thead>
                                    <tr style="size:24px;height:60px">
                                        <th style="text-align:center;width:15%">学号</th>
                                        <th style="text-align:center;width:8%">班号</th>
                                        <th style="text-align:center;width:8%">姓名</th>
                                        <th style="text-align:center;width:5%">性别</th>
                                        <th style="text-align:center;width:12%">通讯地址</th>
                                        <th style="text-align:center;width:12%">学生电话</th>
                                        <th style="text-align:center;width:8%">联系人</th>
                                        <th style="text-align:center;width:12%">联系人电话</th>
                                        <th style="text-align:center;width:20%">操作</th>
                                    </tr>
                                </thead>
                                <tbody style="text-align:center;size:18px">
                                    <tr th:each="student : ${studentList}">
                                        <td th:text="${student.stuId}">学号</td>
                                        <td th:text="${student.classId}">班号</td>
                                        <td th:text="${student.stuName}">姓名</td>
                                        <td th:switch="${student.sex} eq 1">
                                            <span th:case="true" th:text="男">男</span>
                                            <span th:case="false" th:text="女">女</span>
                                        </td>
                                        <td th:text="${student.address}">通讯地址</td>
                                        <td th:text="${student.stuTel}">学生电话</td>
                                        <td th:text="${student.contact}">联系人</td>
                                        <td th:text="${student.contactTel}">联系人电话</td>
                                        <td>
                                            <a data-toggle="modal" href="student_list.html#modal-form"
                                               th:data-stuId="${student.stuId}"
                                               th:data-classId="${student.classId}"
                                               th:data-stuName="${student.stuName}"
                                               th:data-sex="${student.sex}"
                                               th:data-address="${student.address}"
                                               th:data-stuTel="${student.stuTel}"
                                               th:data-contact="${student.contact}"
                                               th:data-contactTel="${student.contactTel}"
                                               onclick="editForm(this.getAttribute('data-stuId'),
                                               this.getAttribute('data-classId'),
                                               this.getAttribute('data-stuName'),
                                               this.getAttribute('data-sex'),
                                               this.getAttribute('data-address'),
                                               this.getAttribute('data-stuTel'),
                                               this.getAttribute('data-contact'),
                                               this.getAttribute('data-contactTel'))">
                                                <button style="margin-top:10px" class="btn btn-outline btn-success" type="button">
                                                    <i class="fa fa-paste"></i> 修改
                                                </button>
                                            </a>
                                            <a th:href="@{/zjh/student/deleteStudentById(stuId = ${student.stuId})}">
                                                <button style="margin-top:10px" class="btn btn-outline btn-danger " type="button" >
                                                    <i class="fa fa-warning"></i> 删除
                                                </button>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="col-sm-6">
                                <div style="size:18px" class="dataTables_info" id="editable_info" role="alert" aria-live="polite" aria-relevant="all">
                                    显示 <span th:text="(${page.current}-1)*6+1"/> 到 <span th:text="${page.current*6}"/> 项, 共 <span th:text="${numberPages}"/> 项
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="dataTables_paginate paging_simple_numbers" id="editable_paginate">
                                    <span class="pagination">
                                        <!--
                                              gt：great than（大于）
                                              ge：great equal（大于等于）
                                              eq：equal（等于）
                                              lt：less than（小于）
                                              le：less equal（小于等于）
                                              ne：not equal（不等于）
                                        -->
                                        <li class="paginate_button previous" aria-controls="editable" tabindex="0" id="editable_start">
                                            <a th:href="@{/zjh/student/nextPage}">首页</a>
                                        </li>
                                        <li class="paginate_button previous" aria-controls="editable" tabindex="0" id="editable_previous"
                                            th:switch="${page.current} gt 1">
                                            <a th:case="true" th:href="@{/zjh/student/nextPage(pageNumber = ${page.current}-1)}">上一页</a>
                                            <a th:case="false" th:href="@{javascript:alert('已经是第一页')}">上一页</a>
                                        </li>
                                        <li th:if="${page.current} gt 3">
                                            . . .
                                        </li>
                                    </span>
                                    <span class="pagination" th:each="status,iterStat:${pagesList}"
                                          th:switch="${page.current eq iterStat.count}">
                                        <li class="paginate_button active disabled" aria-controls="editable" tabindex="0" th:case="true">
                                            <span th:text="${iterStat.count}"></span>
                                        </li>
                                        <li class="paginate_button" aria-controls="editable" tabindex="0" th:case="false" th:if="${page.current} ne ${iterStat.count}">
                                            <a th:if="${page.current + 2 >= iterStat.count && page.current - 2 <= iterStat.count}"
                                               th:href="@{/zjh/student/nextPage(pageNumber = ${iterStat.count})}">
                                                <span th:text="${iterStat.count}"></span>
                                            </a>
                                        </li>
                                    </span>
                                    <span class="pagination">
                                        <li th:if="${pages - page.current} gt 2">
                                            . . .
                                        </li>
                                        <li class="paginate_button next" aria-controls="editable" tabindex="0" id="editable_end"
                                            th:switch="${page.current} lt ${pages}">
                                            <a th:case="true" th:href="@{/zjh/student/nextPage(pageNumber = ${page.current}+1)}">下一页</a>
                                            <a th:case="false" th:href="@{javascript:alert('已经是最后一页')}">下一页</a>
                                        </li>
                                        <li >
                                            <a th:href="@{/zjh/student/nextPage(pageNumber = ${pages})}">尾页</a>
                                        </li>
                                    </span>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

    <div th:include="student/student_add.html :: addStudent"></div>

</body>
<script type="text/javascript">
    function addForm() {
        document.getElementById("stuId").value = '';
        $("#selects").prop("selected",true);
        document.getElementById("stuName").value = '';
        document.getElementById("sex1").checked = true;
        document.getElementById("sex2").checked = false;
        document.getElementById("address").value = '';
        document.getElementById("stuTel").value = '';
        document.getElementById("contact").value = '';
        document.getElementById("contactTel").value = '';
        document.getElementById('stuId').readOnly = false;
    }
    function editForm(stuId, classId, stuName, sex, address, stuTel, contact, contactTel) {
        document.getElementById("stuId").value = stuId;
        $("#" + classId).prop("selected",true);
        document.getElementById("stuName").value = stuName;
        if(sex == 1){
            document.getElementById("sex1").checked = true;
            document.getElementById("sex2").checked = false;
        }else {
            document.getElementById("sex1").checked = false;
            document.getElementById("sex2").checked = true;
        }
        document.getElementById("address").value = address;
        document.getElementById("stuTel").value = stuTel;
        document.getElementById("contact").value = contact;
        document.getElementById("contactTel").value = contactTel;
        document.getElementById('stuId').readOnly = true;
    }
</script>
<script type="text/javascript">
    window.onload=function(){
        console.log("参数: " + '[[${session.result}]]')
        switch ("[[${session.result}]]") {
            case "addTrue":
                Message('success', '√ -添加成功!!!', 2000);
                break;
            case "addFalse":
                Message('error', 'x -添加失败,已存在该信息!!!', 2000);
                break;
            case "editTrue":
                Message('success', '√ -修改成功!!!', 2000);
                break;
            case "editFalse":
                Message('error', 'x -修改失败!!!', 2000);
                break;
            case "deleteTrue":
                Message('success', '√ -删除成功!!!', 2000);
                break;
            default:
                break;
        }
        if(0 == "[[${pages}]]"){
            Message('error', '数据数量为零!!!', 2000);
        }

    };
</script>
</html>
